<script setup lang="ts">

import { RouterLink, RouterView, useRoute } from 'vue-router'
import { routesList } from '@/router/index'
import { computed, ref } from 'vue'

const routeList = ref<any>(routesList)

const route = useRoute()
console.log(route, 'route')

const elementUiAdminMenu = ['userManage', 'roleManage', 'roleManage2', 'studemo72',]
const isRouteStudemo71 = computed(() => {
  return elementUiAdminMenu.includes(route.name as string)
})
</script>

<template>
  <header v-if="!isRouteStudemo71">
    <div class="wrapper">
      <hr>
      <nav>
        <RouterLink to="/">Cui首页</RouterLink>
        <RouterLink to="/studemo1">选项式API</RouterLink>
        <RouterLink :to="{ path: '/studemo2' }">组合式API</RouterLink>
        <RouterLink :to="{ name: 'studemo3Name' }">组合式API-自定义渲染-返回函数</RouterLink>
        <RouterLink to="/studemo4">组合式API-自定义渲染-JSX</RouterLink>
        <RouterLink to="/studemo5">setup 语法糖</RouterLink>
        <RouterLink to="/studemo6">setup 语法糖（ts）</RouterLink>
        <RouterLink to="/studemo21">模板语法-文本</RouterLink>
        <RouterLink to="/studemo22">模板语法-属性</RouterLink>
        <RouterLink to="/studemo23">内置指令</RouterLink>
        <RouterLink to="/studemo24">绑定 HTML class</RouterLink>
        <RouterLink to="/studemo25">绑定内联样式 Style</RouterLink>
        <RouterLink to="/studemo31">声明响应式状态 ref & reactive</RouterLink>
        <RouterLink to="/studemo32">Reactive包装注意事项</RouterLink>
        <RouterLink to="/studemo33">reactive() 的局限性</RouterLink>
        <RouterLink to="/studemo34">额外的 ref 解包细节</RouterLink>
        <RouterLink to="/studemo35">响应式 API:工具函数</RouterLink>
        <RouterLink to="/studemo36">shallowReactive() & shallowReadonly()</RouterLink>
        <RouterLink to="/studemo37">shallowRef() & triggerRef()</RouterLink>
        <RouterLink to="/studemo38">toRaw() & unref() & markRaw()</RouterLink>
        <RouterLink to="/studemo39">customRef()</RouterLink>
        <RouterLink to="/studemo310">effectScope() & getCurrentScope() & onScopeDispose() 案例1</RouterLink>
        <RouterLink to="/studemo311">effectScope() & getCurrentScope() & onScopeDispose()案例2</RouterLink>
        <RouterLink to="/studemo312">effectScope() & getCurrentScope() & onScopeDispose()案例3</RouterLink>
        <RouterLink to="/studemo313"> 计算属性 </RouterLink>
        <RouterLink to="/studemo314"> 侦听器1 </RouterLink>
        <RouterLink to="/studemo315">侦听数据源类型</RouterLink>
        <RouterLink to="/studemo316"> 侦听器 watchEffect</RouterLink>
        <RouterLink to="/studemo317"> 侦听器 副作用清理</RouterLink>
        <RouterLink to="/studemo41"> 组件注册和引入 </RouterLink>
        <RouterLink to="/studemo42"> 组件传值 props </RouterLink>
        <RouterLink to="/studemo43"> 组件事件 emit </RouterLink>
        <RouterLink to="/studemo44"> 插槽 Slots </RouterLink>
        <RouterLink to="/studemo45"> 插槽列表演示 </RouterLink>
        <RouterLink to="/studemo46"> 组合式 API：生命周期钩子 </RouterLink>
        <RouterLink to="/studemo47"> 组件 v-model </RouterLink>
        <RouterLink to="/studemo48"> 组合式函数 </RouterLink>

        <RouterLink to="/studemo51"> 数据初始化加载 </RouterLink>
        <RouterLink to="/studemo52"> 注册事件监听器 </RouterLink>
        <RouterLink to="/studemo53"> 操作 DOM 元素 </RouterLink>
        <RouterLink to="/studemo54">考试</RouterLink>

        <RouterLink to="/studemo61">内置的fetch API进行请求</RouterLink>
        <RouterLink to="/studemo62"> 用axios请求 </RouterLink>
        <RouterLink to="/studemo63">1026考试</RouterLink>


        <RouterLink to="/studemo71"> elementUI </RouterLink>
        <RouterLink to="/studemo72"> elementUI案例 </RouterLink>
        <RouterLink to="/login"> 登陆 </RouterLink>

        <!-- <RouterLink to="/studemo62/user">好滴</RouterLink> -->



        <RouterLink to="/mytest1"> 测试案例test1 </RouterLink>
        <RouterLink to="/mytest2"> 10.9考试购物车 </RouterLink>
        <RouterLink to="/mytest3"> 10.12考试题 </RouterLink>

        <RouterLink to="/stduydemo1"> 案例-学生成绩管理系统 </RouterLink>
        <RouterLink to="/stduydemo2"> 案例-学生成绩管理系统组件版 </RouterLink>
        <RouterLink to="/stduydemo3"> 案例-学生成绩管理系统3(访问模板引用ref&组件暴漏defineExpose())</RouterLink>
        <RouterLink to="/stduydemo4"> 案例-学生成绩管理系统4(插槽版)</RouterLink>
        <RouterLink to="/stduydemo5"> 基础上传 </RouterLink>
        <RouterLink to="/stduydemo6"> 照片墙 </RouterLink>
        <RouterLink to="/stduydemo7"> 覆盖前一张图片 </RouterLink>
        <RouterLink to="/stduydemo8"> 上传图片 </RouterLink>
      </nav>
      <router-link to="/srdemo1">srdemo1路由</router-link>
      <router-link to="/srdemo1/detail1">srdemo1嵌套路由 detail1</router-link>
      <router-link :to="{
        //name:'xiang1', //用name也可以跳转
        path: '/srdemo1/detail1',
        query: {
          id: 1,
          title: '新闻标题',
          content: '内容'
        }
      }">
        query 传参
      </router-link>

      <router-link replace :to="{
        name: 'xiang2',
        params: {
          title: '新闻标题',
          content: '内容'
        }
      }">
        params 传参:replace
      </router-link>

      <router-link :to="{
        name: 'defaultp',
        params: {
          id: '10000'
        }
      }">
        default: params 传参
      </router-link>
    </div>
  </header>

  <RouterView />
</template>

<style scoped lang="scss">
header {
  border-bottom: 1px solid var(--color-border2);
  padding: 10px 0;
}

nav {
  width: 100%;
  padding: auto;
  font-size: 12px;
  text-align: center;

  a {
    display: inline-block;
    padding: 0 1rem;
    border-left: 1px solid var(--color-border);
    color: blue;
    margin: 5px 0;
  }
}
</style>
